<template>
	<picker :value="defaultIndex" :range="dict" range-key="label" style="flex: 1;" @change="handleOperation">
		<view style="display: flex;justify-content: space-between;align-items: center;padding: 32rpx 0;">
			<view style="flex: 1;">{{label}}</view>
			<image src="@/static/icon/right.png" mode="aspectFill" style="width: 32rpx;height: 32rpx;">
			</image>
		</view>
	</picker>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref,
		watch
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const props = defineProps({
		dict: {
			type: Array,
			default: () => {
				return [];
			}
		},
		modelValue: {
			type: String,
			default: ""
		}
	});
	const defaultIndex = ref(null);
	onMounted(() => {
		setTimeout(() => {
			defaultIndex.value = props.dict.findIndex(a => a.value == props.modelValue);
		}, 700)
	})
	const label = computed(() => {
		return props.dict[defaultIndex.value || 0]?.label
	})
	const emit = defineEmits(["update:modelValue","onChange"]);
	const handleOperation = (e) => {
		defaultIndex.value = e.detail.value;
		emit("onChange")
	}
	watch(
		() => defaultIndex.value,
		(newValue) => {
			emit("update:modelValue", props.dict[newValue]?.value);
		})
</script>

<style>
</style>